<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理</title>
  <link rel="stylesheet" href="./assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
  <style>
    .search {
      width: 1000px;
      /* 将页面转为flex布局 */
      display: flex;
      /* 水平布局方式 */
      justify-content: space-between;
      /* 垂直布局方式 */
      align-items: center;
    }

    .search input {
      height: 40px;
      width: 400px;
      margin-right: 20px;
    }

    .opeartion {
      display: flex;
      justify-content: space-between;
    }

    .opeartion button {
      margin-right: 10px;
      width: 100px;
    }

    .table {
      margin-top: 20px;
    }
    .addForm div{
      display: flex;
      margin-bottom: 15px;
    }
    .addForm div label{
      display: inline-block;
      width: 70px;
    }
  </style>
</head>

<body>
  <div class="books">
    <!-- 面包屑部分 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item">图书管理</li>

      </ol>
    </nav>
    <!-- 水平线 -->
    <hr>
    <!-- 搜索部分开始 -->
    <div class="search">
      <!-- <p>图书搜索:</p> -->
      <div class="input-group ">
        <input type="text" class="form-control searchBookId" placeholder="请输入要修改的图书ID" aria-label="Username"
          aria-describedby="basic-addon1">
      </div>
      <div class="opeartion">
        <button type="button" class="btn btn-success seachBook">搜索</button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">添加</button>
      </div>

    </div>
    <!-- 表格部分 -->
    <table class="table">
      <thead>
        <tr>
          <th scope="col">编号</th>
          <th scope="col">书名</th>
          <th scope="col">作者</th>
          <th scope="col">出版社</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

    <!-- 添加图书的模态框-->
    <!-- 添加图书Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form action="#" class="addForm">
              <div class="bookname">
                <label for="#">书&nbsp;&nbsp;&nbsp;名:</label>
                <input type="text" class="form-control newBookname" placeholder="请输入书名">
              </div>
               
              <div class="author" >
                <label for="#">作&nbsp;&nbsp;&nbsp;者:</label>
                <input type="text" class="form-control newBookauthor" placeholder="请输入作者">
              </div>
              
              <div class="publisher">
                <label for="#">出版社:</label>
                <input type="text" class="form-control newBookPublisher" placeholder="请输入出版社">
              </div>
              
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary addBook" data-bs-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改图书的modal -->
    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">修改图书</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form action="#" class="addForm">
              <div class="bookname">
                <label for="#">书&nbsp;&nbsp;&nbsp;名:</label>
                <input type="text" class="form-control updateBookname" placeholder="请输入书名">
              </div>
               
              <div class="author" >
                <label for="#">作&nbsp;&nbsp;&nbsp;者:</label>
                <input type="text" class="form-control updateBookauthor" placeholder="请输入作者">
              </div>
              
              <div class="publisher">
                <label for="#">出版社:</label>
                <input type="text" class="form-control updateBookPublisher" placeholder="请输入出版社">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary saveUpdateBook" data-bs-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>

  </div>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./assets/bootstrap-5.3.8-dist/js/bootstrap.min.js"></script>
  <script>

    /* 
    获取图书列表
    API接口文档：https://s.apifox.cn/fa9274ac-362e-4905-806b-6135df6aa90e/api-24991093
    请求类型：GET
    请求地址:http://ajax-api.itheima.net/api/books
    请求参数:无
    */
    function getBookList() {
      //清空表格里面现有的内容
      $('tbody').children('tr').remove()
      $.get('http://ajax-api.itheima.net/api/books', data => {
        const bookList = data.data
        // console.log(bookList);
        bookList.forEach(item => {
          // console.log(item);
          let tr = $(`
            <tr>
            <td>${item.id}</td>  
            <td>${item.bookname}</td>  
            <td>${item.author}</td>  
            <td>${item.publisher}</td>  
            <td>
            <button type="button" class="btn btn-primary"  onclick="updatBook(${item.id})" data-bs-toggle="modal" data-bs-target="#exampleModal2">修改</button>  
            <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>  
            </td>
            </tr>
            
            `)
          $('tbody').append(tr)

        })


      })

    }
    /* 
    删除图书功能
    请求类型：delete
    请求地址:http://ajax-api.itheima.net/api/books/{id}
    请求参数:路径参数
    */
    function deleteBook(id) {
      $.ajax({
        type: 'DELETE',
        url: `http://ajax-api.itheima.net/api/books/${id}`,
        success: () => {
          alert('删除成功')
          setTimeout(() => {
            getBookList()
          }, 500)

        }
      })


    }
    /* 
    根据ID查询图书
    用户在input中输入要查询的id
    用户点击查询按钮时，通过发起请求，根据输入的Id查询数据
    如果用户输入了ID，就根据id查询
    如果用户没有输入了ID，此时就查询所有的数据

    请求：
    请求类型:GET
    请求路径：http://ajax-api.itheima.net/api/books/{id}
    请求参数：查询图书的ID
    */
    // $('.searchBook').click(() => {
    //   console.log($('input').val());
    //   console.log($('input').val() === '');
    //   if ($('input').val() === '') {
    //     getBookList()
    //   } else {
    //     $.ajax({
    //       type: 'get',
    //       url: `http://ajax-api.itheima.net/api/books/${$('input').val()}`,
    //       success: data => {
    //         console.log(data);
    //         alert(data.message)
    //         $('tbody').children('tr').remove()
    //         let tr = $(`<tr>
    //         <td>${data.data.id}</td>
    //         <td>${data.data.bookname}</td>
    //         <td>${data.data.author}</td>
    //         <td>${data.data.publisher}</td>
    //         <td>
    //         <button type="button" class="btn btn-primary">修改</button>
    //         <button type="button" class="btn btn-danger" onclick="deleteBook(${data.data.id})">删除</button>  
    //         </td>
    //         </tr>`)
    //         $('tbody').append(tr)
    //         $('input').val('')
    //       }
    //     })
    //   }
    // })

    $('.seachBook').click(function () {
      //alert('你正在查找图书')
      let id = $('.searchBookId').val()
      console.log(id);
      if (!id) {
        //用户没有输入id时，获取所有数据
        getBookList()
      } else {
        //根据id，请求数据
        $.ajax({
          type: `get`,
          url: `http://ajax-api.itheima.net/api/books/${id}`,
          //请求成功的调回
          success: data => {
            // console.log(data);
            //提示用户查询图书成功
            alert('图书查询成功')
            //将input框的内容置空
            $('.searchBookId').val('')
            //将图书的信息从返回数据中解析
            let bookInfo = data.data
            // console.log(bookInfo);

            //在表格中渲染请求成功的数据
            //先清空之前的数据
            $('tbody').children('tr').remove()
            //将数据放到页面
            //创建tr
            let tr = $(`
            
            <tr>
            <td>${bookInfo.id}</td>
            <td>${bookInfo.bookname}</td>
            <td>${bookInfo.author}</td>
            <td>${bookInfo.publisher}</td>
            <td>
              <button type="button" class="btn btn-primay" data-bs-toggle="modal" data-bs-target="#exmpleModa12">修改</button>
              <button type="button" class="btn btn-daner">删除</button>
              </td>
            </tr>
            
            `)

            //将tr放入tbody中
            $('tbody').append(tr)

          },
          // //请求失败的回调
          // error:err => {
          //   console.log(err);

          // }


        })
      }
    })

    /* 添加图书
     业务流程：
    1.用户点击添加按钮
    2.弹出对话框/模态框
    3.用户点击模态框确认，发起添加图书的请求
    如果用户没有输入图书信息，提示用户不能为空
    如果所有的内容都有，则发起请求，提示添加成功

    请求类型:POST
    请求地址:'http://ajax-api.itheima.net/api/books'
    请求参数book参数，
    传递对象，包括
    bookname
    author
    publisher
    */

    $('.addBook').click(function(){
      //alert('您触发添加图书的事件~')
      //判断用户是否录入了图书信息，判断书名、作者、出版社对应的输入框是否有值
      //书名
      // newBookname
      // newBookauthor
      // newBookPublisher
      let bookname = $('.newBookname').val()
      console.log(bookname);
      let author = $('.newBookauthor').val()
      console.log(author);
      let publisher = $('.newBookPublisher').val()
      console.log(publisher);
   
      //判断用户是否录入了数据
      if(!(bookname && author &&publisher)) {
        alert('图书信息不能为空')
      }else{
        let bookInfo={
          bookname,
          author,
          publisher
        }
        //发起添加图书的请求
        $.ajax({
          type:'post',
          url:'http://ajax-api.itheima.net/api/books',
          data:bookInfo,
          success:data =>{
            alert('添加成功')
            // console.log(data);
            //清空添加图书的表单信息
            $('.newBookName').val('')
            $('.newBookAuthor').val('')
            $('.newBookPublisher').val('')
            //拉取最新数据，关闭模态框
            getBookList()

          }
        })
      }
      
    })


    /* 
    修改图书功能
    1. 业务流程（交互流程）
      用户点击修改按钮
      弹出模态框，并回显当前点击行的数据
      用户点击确认
      提示修改的结果
      关闭模态框，拉取最新数据
    2.所调用的接口
      用户点击修改按钮时，获取当前点击的id，回显数据（根据id查询某图书的信息）
    请求类型:GET
    请求地址:http://ajax-api.itheima.net/api/books/{id}
    请求参数：路径参数(id)
      用户点击修改表单里面的确认时，将修改后的数据提交到服务器

      请求类型:PUT
      请求地址:http://ajax-api.itheima.net/api/books/{id}
      请求参数：

    */ 

    //用户点击修改按钮时，获取当前点击的id
  function updatBook(id){
      //弹出模态框，并回显当前点击行的数据
    /*
      $.get(请求路径，成功回调)
    */     
   $.get(`http://ajax-api.itheima.net/api/books/${id}`,data => {
    console.log(data);
    //数据回显到修改的图书的表单中
    let bookInfo = data.data
    console.log(bookInfo);
    //updateBookname
    $('.updateBookname').val(bookInfo.bookname)
    //updateBookauthor
    $('.updateBookauthor').val(bookInfo.author)
    //updateBookPublisher
    $('.updateBookPublisher').val(bookInfo.publisher)
    
   })

   //用户点击确认，将数据传到服务器
   //saveUpdateBook
   $('.saveUpdateBook').click(function () {
    //alert('您触发了提交图书的信息')
    //非空校验
    let bookname = $('.updateBookname').val()
    let author = $('.updateBookauthor').val()
    let publisher = $('.updateBookPublisher').val()
    console.log(bookname);
    console.log(author);
    console.log(publisher);

    //数据的
    if(!(bookname && author && publisher)) {
      alert('图书信息不能为空')
    }else{
      $.ajax({
        type:'put',
        url:`http://ajax-api.itheima.net/api/books/${id}`,
        data:{
          bookname,
          author,
          publisher
        },
        success:() => {
          alert('图书修改成功')
          //获取服务器最新数据
          getBookList()
        }

      })
    }
   })
  }

    getBookList()
  </script>
</body>

</html>